<template>
  <div>
    <el-dialog title="新增用户" :visible.sync="addUserDia" width="60%" center>
      <div class="home">
        <div class="header">
          <el-steps :active="num" simple>
            <el-step title="步骤 1" icon="el-icon-edit"></el-step>
            <el-step title="步骤 2" icon="el-icon-upload"></el-step>
            <el-step title="步骤 3" icon="el-icon-picture"></el-step>
          </el-steps>
        </div>
        <div class="content">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="80px"
            class="demo-ruleForm"
          >
            <el-card class="box-card" v-if="num==1">
              <div slot="header" class="clearfix">
                <span>账号注册</span>
              </div>
              <el-form-item label="用 户 名" prop="name" verify :minLength="1">
                <el-input
                  clearable
                  v-model="ruleForm.name"
                  autocomplete="off"
                  placeholder="请输入你的登录名"
                ></el-input>
              </el-form-item>
              <el-form-item label="用户密码" prop="pass">
                <el-input
                  clearable
                  type="password"
                  v-model="ruleForm.pass"
                  autocomplete="off"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input
                  clearable
                  type="password"
                  v-model="ruleForm.checkPass"
                  autocomplete="off"
                  placeholder="请再次输入密码"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮箱地址" prop="email" verify email>
                <el-input v-model="ruleForm.email" placeholder="请输入邮箱地址" clearable></el-input>
              </el-form-item>
            </el-card>
            <el-card class="box-card" v-if="num==2">
              <div slot="header" class="clearfix">
                <span>身份信息完善</span>
              </div>
              <el-form-item label="QQ号码" prop="qq" verify int :gt="0">
                <el-input
                  type="text"
                  v-model="ruleForm.qq"
                  autocomplete="off"
                  placeholder="请输入你的QQ号码"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="电话号码" prop="phone" verify phone>
                <el-input
                  type="text"
                  v-model="ruleForm.phone"
                  autocomplete="off"
                  placeholder="请输入电话号码"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="人生格言" prop="geyan" verify :minLength="1">
                <el-input v-model="ruleForm.geyan" placeholder="请输入人生格言" clearable></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio v-model="radio" label="1">男</el-radio>
                <el-radio v-model="radio" label="2">女</el-radio>
              </el-form-item>
            </el-card>
            <el-card class="box-card" v-if="num==3">
              <div slot="header" class="clearfix">
                <span>上传头像</span>
              </div>
              <span>上传图片不能超过2mb</span>
              <el-tooltip
                class="item"
                effect="light"
                content="jpg only，size<2mb"
                placement="top-start"
              >
                <el-upload
                  class="avatar-uploader"
                  action="http://127.0.0.1:9999/invitation/imgUrl"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-tooltip>
            </el-card>
          </el-form>
        </div>
        <el-button type="primary" @click="btn('ruleForm')">{{next}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reg } from "@/api/user.js";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      addUserDia: false,
      next: "下一步",
      imageUrl: "",
      email: "",
      name: "",
      geyan: "",
      qq: "",
      phone: "",
      num: 1,
      radio: "2",
      value: "",
      ruleForm: {
        pass: "",
        checkPass: "",
        email: "",
        name: "",
        geyan: "",
        qq: "",
        phone: ""
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  methods: {
    open(flag) {
      this.addUserDia = flag;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    btn(val) {
      this.$refs[val].validate(valid => {
        if (valid) {
          if (this.num < 3) {
            if (this.num < 2) {
              this.next = "下一步";
            } else {
              this.next = "注册";
            }
            this.num++;
          } else {
            if (this.imageUrl != "") {
              let obj = {
                email: this.ruleForm.email,
                geyan: this.ruleForm.geyan,
                phone: this.ruleForm.phone,
                qq: this.ruleForm.qq,
                userName: this.ruleForm.name,
                userPwd: this.ruleForm.pass,
                userSex: this.radio,
                userUrl: this.imageUrl
              };
              reg(obj)
                .then(res => {
                  if (res.data.responseCode == 200) {
                    this.$message({
                      message: "恭喜你，注册成功！",
                      type: "success"
                    });
                    this.$emit("getData");
                    this.addUserDia = false;
                  } else {
                    this.$message({
                      message: res.data.responseMsg,
                      type: "warning"
                    });
                  }
                })
                .catch(error => {
                  this.$message({
                    message: "注册失败",
                    type: "warning"
                  });
                });
            }
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.home {
  background-color: rgba(6, 240, 240, 0.493);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  text-align: center;
}
.header {
  width: 100%;
  height: 100px;
  top: 0px;
}
.content {
  width: 80%;
  margin: 0 auto;
  height: 400px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.box-card {
  width: 480px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.8);
}
#app {
  margin: 0;
  padding: 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #938c9d;
  background-color: rgba(95, 116, 233, 0.363);
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>